<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CDN加速OSS全解析 | 技术指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .code-block {
            background: #2d3748;
            color: #f8fafc;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        .code-header {
            background: #1a202c;
            padding: 0.5rem 1rem;
            display: flex;
            align-items: center;
        }
        .code-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 6px;
        }
        .code-dot-red {
            background: #f56565;
        }
        .code-dot-yellow {
            background: #f6e05e;
        }
        .code-dot-green {
            background: #48bb78;
        }
        .table-container {
            overflow-x: auto;
        }
        table {
            min-width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }
        th {
            background: #f7fafc;
            font-weight: 600;
        }
        th, td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
        }
        tr:hover td {
            background: #f8f9fa;
        }
        .highlight {
            position: relative;
        }
        .highlight:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 2px;
            width: 100%;
            height: 8px;
            background: rgba(56, 178, 172, 0.3);
            z-index: -1;
        }
        .mermaid {
            background: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20">
        <div class="container mx-auto px-6 max-w-4xl">
            <div class="flex flex-col items-center text-center">
                <div class="bg-white bg-opacity-20 rounded-full px-4 py-2 mb-6">
                    <span class="text-sm font-medium">技术指南</span>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">CDN加速OSS全解析</h1>
                <p class="text-xl opacity-90 max-w-2xl mb-10">解锁对象存储性能瓶颈，构建高效内容分发网络的最佳实践</p>
                <div class="flex space-x-4">
                    <a href="#why-cdn" class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-full font-medium transition duration-300">
                        <i class="fas fa-play-circle mr-2"></i>开始探索
                    </a>
                    <a href="#mermaid-chart" class="bg-white bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-full font-medium transition duration-300">
                        <i class="fas fa-project-diagram mr-2"></i>架构图解
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-16 max-w-4xl">
        <!-- Why CDN Section -->
        <section id="why-cdn" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-question-circle text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">一、为什么需要CDN加速？OSS访问的性能瓶颈</h2>
            </div>
            <p class="text-lg text-gray-700 mb-6">在现代应用中，OSS作为对象存储服务，虽然提供了高可靠性和大容量存储，但在高并发访问场景下仍可能面临以下问题：</p>
            
            <div class="grid md:grid-cols-3 gap-6 mb-10">
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-clock text-red-500 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">访问延迟高</h3>
                    <p class="text-gray-600">用户距离OSS服务器较远时，响应时间增加</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-money-bill-wave text-yellow-500 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">带宽成本高</h3>
                    <p class="text-gray-600">直接访问OSS会产生大量外网流量</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-fire text-purple-500 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">热点资源压力大</h3>
                    <p class="text-gray-600">热门文件可能导致OSS服务器过载</p>
                </div>
            </div>

            <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-10 rounded-r-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb text-blue-500 text-xl mt-1 mr-3"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-blue-800 mb-2">CDN（内容分发网络）解决方案</h3>
                        <ul class="list-disc pl-5 space-y-1 text-blue-700">
                            <li><span class="highlight">边缘节点缓存</span>：将内容分发到离用户更近的节点</li>
                            <li><span class="highlight">流量卸载</span>：减少OSS服务器的直接访问压力</li>
                            <li><span class="highlight">智能调度</span>：选择最优节点提供服务</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Mermaid Diagram -->
            <div id="mermaid-chart" class="mermaid mb-10">
                graph TD
                    A[用户请求] --> B(CDN智能DNS解析)
                    B --> C{边缘节点缓存检查}
                    C -->|缓存命中| D[直接返回内容]
                    C -->|缓存未命中| E[回源到OSS获取]
                    E --> F[内容缓存到边缘节点]
                    F --> D
                    D --> G[用户获取内容]
            </div>
        </section>

        <!-- Core Principles Section -->
        <section id="core-principles" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-cogs text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">二、CDN加速OSS的核心原理</h2>
            </div>

            <h3 class="text-2xl font-semibold mb-4 mt-8 text-blue-700">2.1 CDN工作流程</h3>
            <ol class="list-decimal pl-6 space-y-3 mb-8">
                <li><span class="font-medium">用户请求</span>：用户访问资源URL</li>
                <li><span class="font-medium">DNS解析</span>：CDN智能DNS返回最优节点IP</li>
                <li><span class="font-medium">边缘节点响应</span>：
                    <ul class="list-disc pl-6 mt-1">
                        <li>如果有缓存，直接返回</li>
                        <li>如果没有缓存，回源到OSS获取</li>
                    </ul>
                </li>
                <li><span class="font-medium">缓存更新</span>：将OSS内容缓存到边缘节点</li>
            </ol>

            <h3 class="text-2xl font-semibold mb-4 mt-8 text-blue-700">2.2 OSS与CDN的集成方式</h3>
            <div class="grid md:grid-cols-2 gap-6 mb-8">
                <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-blue-500">
                    <h4 class="font-bold text-lg mb-2">CDN作为OSS的缓存层</h4>
                    <p class="text-gray-600">通过CDN加速OSS的静态资源访问</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm border-l-4 border-green-500">
                    <h4 class="font-bold text-lg mb-2">OSS作为CDN的回源站</h4>
                    <p class="text-gray-600">CDN从OSS拉取内容并缓存</p>
                </div>
            </div>

            <h3 class="text-2xl font-semibold mb-4 mt-8 text-blue-700">2.3 性能对比</h3>
            <div class="table-container mb-8">
                <table class="w-full rounded-lg overflow-hidden">
                    <thead>
                        <tr>
                            <th class="bg-blue-50">指标</th>
                            <th class="bg-blue-50">直接访问OSS</th>
                            <th class="bg-blue-50">CDN加速OSS</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>平均延迟</td>
                            <td>200ms</td>
                            <td class="text-green-600 font-medium">50ms</td>
                        </tr>
                        <tr>
                            <td>带宽成本</td>
                            <td>高</td>
                            <td class="text-green-600 font-medium">低</td>
                        </tr>
                        <tr>
                            <td>并发能力</td>
                            <td>1000 QPS</td>
                            <td class="text-green-600 font-medium">10000 QPS</td>
                        </tr>
                        <tr>
                            <td>可用性</td>
                            <td>99.9%</td>
                            <td class="text-green-600 font-medium">99.99%</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- Configuration Steps -->
        <section id="configuration" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-tools text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">三、CDN加速OSS的配置步骤</h2>
            </div>

            <h3 class="text-2xl font-semibold mb-4 mt-8 text-blue-700">3.1 创建CDN加速域名</h3>
            <ol class="list-decimal pl-6 space-y-3 mb-8">
                <li>登录<a href="https://cdn.console.aliyun.com" class="text-blue-600 hover:underline">阿里云CDN控制台</a></li>
                <li>添加域名，选择OSS作为源站</li>
                <li>配置CNAME解析</li>
            </ol>

            <h3 class="text-2xl font-semibold mb-4 mt-8 text-blue-700">3.2 OSS绑定CDN域名</h3>
            <div class="code-block mb-8">
                <div class="code-header">
                    <div class="code-dot code-dot-red"></div>
                    <div class="code-dot code-dot-yellow"></div>
                    <div class="code-dot code-dot-green"></div>
                    <span class="text-sm ml-2 text-gray-400">Java</span>
                </div>
                <pre class="p-4 overflow-x-auto"><code class="language-java">// 设置OSS Bucket的CNAME
public void bindCNAME(String bucketName, String cname) {
    BucketCnameConfiguration configuration = new BucketCnameConfiguration();
    configuration.addCname(new Cname(cname));
    ossClient.setBucketCname(bucketName, configuration);
}</code></pre>
            </div>

            <h3 class="text-2xl font-semibold mb-4 mt-8 text-blue-700">3.3 验证配置</h3>
            <div class="code-block mb-8">
                <div class="code-header">
                    <div class="code-dot code-dot-red"></div>
                    <div class="code-dot code-dot-yellow"></div>
                    <div class="code-dot code-dot-green"></div>
                    <span class="text-sm ml-2 text-gray-400">Bash</span>
                </div>
                <pre class="p-4 overflow-x-auto"><code class="language-bash"># 使用dig命令验证CNAME解析
dig ts.your-cdn-domain.com</code></pre>
            </div>
        </section>

        <!-- Cache Optimization -->
        <section id="cache-optimization" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-bolt text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">四、CDN缓存策略优化</h2>
            </div>

            <h3 class="text-2xl font-semibold mb-4 mt-8 text-blue-700">4.1 缓存规则配置</h3>
            <div class="code-block mb-8">
                <div class="code-header">
                    <div class="code-dot code-dot-red"></div>
                    <div class="code-dot code-dot-yellow"></div>
                    <div class="code-dot code-dot-green"></div>
                    <span class="text-sm ml-2 text-gray-400">Java</span>
                </div>
                <pre class="p-4 overflow-x-auto"><code class="language-java">public void setCacheRules(String bucketName) {
    CacheConfiguration config = new CacheConfiguration()
        .setCacheTTL(3600) // 缓存1小时
        .setCacheControl("public, max-age=3600")
        .setIgnoreQueryString(true); // 忽略URL参数
    ossClient.setBucketCacheConfiguration(bucketName, config);
}</code></pre>
            </div>

            <h3 class="text-2xl font-semibold mb-4 mt-8 text-blue-700">4.2 缓存刷新与预热</h3>
            <div class="grid md:grid-cols-2 gap-6 mb-8">
                <div class="code-block">
                    <div class="code-header">
                        <div class="code-dot code-dot-red"></div>
                        <div class="code-dot code-dot-yellow"></div>
                        <div class="code-dot code-dot-green"></div>
                        <span class="text-sm ml-2 text-gray-400">Java</span>
                    </div>
                    <pre class="p-4 overflow-x-auto"><code class="language-java">// 刷新缓存
public void refreshCache(String url) {
    RefreshObjectCachesRequest request = new RefreshObjectCachesRequest()
        .setObjectPath(url)
        .setObjectType("File");
    cdnClient.refreshObjectCaches(request);
}</code></pre>
                </div>
                <div class="code-block">
                    <div class="code-header">
                        <div class="code-dot code-dot-red"></div>
                        <div class="code-dot code-dot-yellow"></div>
                        <div class="code-dot code-dot-green"></div>
                        <span class="text-sm ml-2 text-gray-400">Java</span>
                    </div>
                    <pre class="p-4 overflow-x-auto"><code class="language-java">// 预热缓存
public void preloadCache(String url) {
    PushObjectCacheRequest request = new PushObjectCacheRequest()
        .setObjectPath(url)
        .setArea("domestic"); // 国内节点
    cdnClient.pushObjectCache(request);
}</code></pre>
                </div>
            </div>

            <h3 class="text-2xl font-semibold mb-4 mt-8 text-blue-700">4.3 动态内容加速</h3>
            <div class="code-block mb-8">
                <div class="code-header">
                    <div class="code-dot code-dot-red"></div>
                    <div class="code-dot code-dot-yellow"></div>
                    <div class="code-dot code-dot-green"></div>
                    <span class="text-sm ml-2 text-gray-400">Java</span>
                </div>
                <pre class="p-4 overflow-x-auto"><code class="language-java">public void setDynamicCache(String bucketName) {
    CacheConfiguration config = new CacheConfiguration()
        .setCacheTTL(60) // 短缓存
        .setCacheControl("no-cache")
        .setIgnoreQueryString(false); // 区分URL参数
    ossClient.setBucketCacheConfiguration(bucketName, config);
}</code></pre>
            </div>
        </section>

        <!-- Advanced Features -->
        <section id="advanced-features" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-star text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">五、高级功能实战</h2>
            </div>

            <div class="grid md:grid-cols-3 gap-6 mb-10">
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-shield-alt text-red-500 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">防盗链配置</h3>
                    <div class="code-block mt-4">
                        <div class="code-header">
                            <div class="code-dot code-dot-red"></div>
                            <div class="code-dot code-dot-yellow"></div>
                            <div class="code-dot code-dot-green"></div>
                            <span class="text-sm ml-2 text-gray-400">Java</span>
                        </div>
                        <pre class="p-4 overflow-x-auto text-sm"><code class="language-java">public void setRefererConfig(String bucketName) {
    RefererConfiguration config = new RefererConfiguration()
        .setAllowEmptyReferer(false)
        .addReferer("https://ts.your-domain.com");
    ossClient.setBucketReferer(bucketName, config);
}</code></pre>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-lock text-green-500 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">HTTPS加速</h3>
                    <div class="code-block mt-4">
                        <div class="code-header">
                            <div class="code-dot code-dot-red"></div>
                            <div class="code-dot code-dot-yellow"></div>
                            <div class="code-dot code-dot-green"></div>
                            <span class="text-sm ml-2 text-gray-400">Java</span>
                        </div>
                        <pre class="p-4 overflow-x-auto text-sm"><code class="language-java">public void enableHTTPS(String domainName) {
    DomainConfig domainConfig = new DomainConfig()
        .setDomainName(domainName)
        .setHttpsEnable(true)
        .setHttp2Enable(true);
    cdnClient.setDomainConfig(domainConfig);
}</code></pre>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-chart-line text-purple-500 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">实时日志分析</h3>
                    <div class="code-block mt-4">
                        <div class="code-header">
                            <div class="code-dot code-dot-red"></div>
                            <div class="code-dot code-dot-yellow"></div>
                            <div class="code-dot code-dot-green"></div>
                            <span class="text-sm ml-2 text-gray-400">Java</span>
                        </div>
                        <pre class="p-4 overflow-x-auto text-sm"><code class="language-java">public void analyzeLogs(String domainName) {
    DescribeCdnDomainLogsRequest request = new DescribeCdnDomainLogsRequest()
        .setDomainName(domainName)
        .setStartTime("2023-01-01T00:00:00Z")
        .setEndTime("2023-01-02T00:00:00Z");
    DescribeCdnDomainLogsResponse response = cdnClient.describeCdnDomainLogs(request);
    // 处理日志数据
}</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <!-- Performance Optimization -->
        <section id="performance" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-tachometer-alt text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">六、性能优化与最佳实践</h2>
            </div>

            <div class="grid md:grid-cols-3 gap-6 mb-10">
                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <h3 class="text-xl font-semibold mb-4 text-blue-700 flex items-center">
                        <i class="fas fa-laptop-code text-blue-500 mr-2"></i> 客户端优化
                    </h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-700">
                        <li><span class="font-medium">HTTP/2支持</span>：减少连接数，提高并发</li>
                        <li><span class="font-medium">资源合并</span>：合并CSS/JS文件，减少请求数</li>
                        <li><span class="font-medium">压缩传输</span>：启用Gzip/Brotli压缩</li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <h3 class="text-xl font-semibold mb-4 text-blue-700 flex items-center">
                        <i class="fas fa-server text-blue-500 mr-2"></i> 服务端优化
                    </h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-700">
                        <li><span class="font-medium">智能缓存</span>：根据内容类型设置不同缓存策略</li>
                        <li><span class="font-medium">边缘计算</span>：在CDN节点处理简单逻辑</li>
                        <li><span class="font-medium">负载均衡</span>：多CDN服务商切换</li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <h3 class="text-xl font-semibold mb-4 text-blue-700 flex items-center">
                        <i class="fas fa-shield-alt text-blue-500 mr-2"></i> 安全防护
                    </h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-700">
                        <li><span class="font-medium">DDoS防护</span>：启用CDN的DDoS防护功能</li>
                        <li><span class="font-medium">WAF集成</span>：配置Web应用防火墙</li>
                        <li><span class="font-medium">访问控制</span>：限制IP访问频率</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Case Study -->
        <section id="case-study" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-images text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold">七、实战案例：图片加速服务</h2>
            </div>

            <h3 class="text-2xl font-semibold mb-4 text-blue-700">7.1 需求场景</h3>
            <ul class="list-disc pl-6 space-y-2 mb-8">
                <li>加速图片访问</li>
                <li>支持动态缩放</li>
                <li>防止盗链</li>
            </ul>

            <h3 class="text-2xl font-semibold mb-4 text-blue-700">7.2 代码实现</h3>
            <h4 class="text-xl font-semibold mb-3 mt-6">图片URL生成</h4>
            <div class="code-block mb-8">
                <div class="code-header">
                    <div class="code-dot code-dot-red"></div>
                    <div class="code-dot code-dot-yellow"></div>
                    <div class="code-dot code-dot-green"></div>
                    <span class="text-sm ml-2 text-gray-400">Java</span>
                </div>
                <pre class="p-4 overflow-x-auto"><code class="language-java">public String generateImageUrl(String objectName, int width, int height) {
    String style = "image/resize,m_fixed,w_" + width + ",h_" + height;
    return "https://ts.your-cdn-domain.com/" + objectName + "?x-oss-process=" + style;
}</code></pre>
            </div>

            <h4 class="text-xl font-semibold mb-3 mt-6">防盗链验证</h4>
            <div class="code-block mb-8">
                <div class="code-header">
                    <div class="code-dot code-dot-red"></div>
                    <div class="code-dot code-dot-yellow"></div>
                    <div class="code-dot code-dot-green"></div>
                    <span class="text-sm ml-2 text-gray-400">Java</span>
                </div>
                <pre class="p-4 overflow-x-auto"><code class="language-java">public boolean validateReferer(HttpServletRequest request) {
    String referer = request.getHeader("Referer");
    return referer != null && referer.startsWith("https://ts.your-domain.com");
}</code></pre>
            </div>

            <h4 class="text-xl font-semibold mb-3 mt-6">缓存刷新</h4>
            <div class="code-block mb-8">
                <div class="code-header">
                    <div class="code-dot code-dot-red"></div>
                    <div class="code-dot code-dot-yellow"></div>
                    <div class="code-dot code-dot-green"></div>
                    <span class="text-sm ml-2 text-gray-400">Java</span>
                </div>
                <pre class="p-4 overflow-x-auto"><code class="language-java">public void refreshImageCache(String objectName) {
    String url = "https://ts.your-cdn-domain.com/" + objectName;
    refreshCache(url);
}</code></pre>
            </div>
        </section>

        <!-- Summary -->
        <section class="bg-blue-50 rounded-xl p-8 mb-20">
            <div class="flex items-start">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-blue-500 text-2xl mt-1 mr-4"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-blue-800 mb-4">关键总结</h3>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div>
                            <h4 class="font-semibold text-blue-700 mb-2">优势对比</h4>
                            <ul class="list-disc pl-5 space-y-1 text-blue-700">
                                <li>延迟降低75%（200ms → 50ms）</li>
                                <li>并发能力提升10倍（1K → 10K QPS）</li>
                                <li>带宽成本显著降低</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-semibold text-blue-700 mb-2">最佳实践</h4>
                            <ul class="list-disc pl-5 space-y-1 text-blue-700">
                                <li>合理设置缓存策略（静态/动态内容）</li>
                                <li>启用HTTPS和防盗链保护资源</li>
                                <li>监控分析CDN日志优化性能</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto px-6 text-center">
            <div class="mb-6">
                <h3 class="text-xl font-medium text-white mb-2">技术小馆</h3>
                <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition duration-300">http://www.yuque.com/jtostring</a>
            </div>
            <div class="flex justify-center space-x-6 mb-6">
                <a href="#" class="text-gray-400 hover:text-white">
                    <i class="fab fa-github text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <i class="fab fa-twitter text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white">
                    <i class="fab fa-linkedin text-xl"></i>
                </a>
            </div>
            <p class="text-sm text-gray-500">© 2023 技术小馆. 保留所有权利.</p>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>